// 点击不同的品牌时显示不同的css样式,以及可能会筛选到相对应的品牌的商品
// 点击不同的品牌时显示不同的css样式
// 1.查找触发事件的元素
let liEle = $(".brand-ul>li");
// 2.绑定事件处理函数
liEle.each(function () {
  let $this = $(this);
  $this.click(() => {
    if ($this.html() == "品牌：") {
      return;
    }
    // 3.查找要修改的元素
    console.log($this);
    // 4.修改元素
    $this.addClass("active").siblings().removeClass("active");
  });
});

// 点击页数或者上下一页,改变其css样式
let pageLi = $(".pageC-btn li");
console.log(pageLi);
pageLi.each(function () {
  let $this = $(this);
  $this.click(() => {
    // console.log($this);
    // 修改css样式
    $this.addClass("page-active").siblings().removeClass("page-active");
    // 发送请求
    // 目标页
    let pageCount = $this.context.innerText;
    $.ajax({
      url: "http://127.0.0.1:3000/list",
      type: "get",
      data: { id: pageCount },
      success: res => {
        // console.log(res.result);
        let data = res.result;
        let html = ``;
        for (let n = 0; n < data.length; n++) {
          html += `<div class="spec">
                    <a class="spec-sale">
                        <span>热卖</span>
                    </a>
                    <div class="spec-img">
                        <img src="../imgs/${data[n].lg}" alt="" />
                    </div>
                    <div class="spec-sm">
                        <img src="../imgs/${data[n].sm}" alt="" />
                    </div>
                    <p class="spec-price">¥${data[n].price.toFixed(2)}</p>
                    <p class="spec-title">${data[n].title}</p>
                    <p class="spec-count">${data[n].count}销量</p>
                  </div>`;
        }
        $(".product").html(html);
      },
    });
  });
});

// 页面初始化完成时,加载数据库的商品
onload = function () {
  $.ajax({
    url: "http://127.0.0.1:3000/list",
    type: "get",
    data: { id: "1" },
    success: res => {
      // console.log(res.result);
      let data = res.result;
      let html = ``;
      for (let n = 0; n < data.length; n++) {
        html += `<div class="spec">
                  <a class="spec-sale">
                      <span>热卖</span>
                  </a>
                  <div class="spec-img">
                      <img src="../imgs/${data[n].lg}" alt="" />
                  </div>
                  <div class="spec-sm">
                      <img src="../imgs/${data[n].sm}" alt="" />
                  </div>
                  <p class="spec-price">¥${data[n].price.toFixed(2)}</p>
                  <p class="spec-title">${data[n].title}</p>
                  <p class="spec-count">${data[n].count}销量</p>
                </div>`;
      }
      $(".product").html(html);
    },
  });
};

// 当页面滚动到多少时,固定查看方式一栏到页面顶部
onscroll = function () {
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  // console.log(scrollTop)
  let divEle = $(".preview");
  // console.log(divEle);

  if (scrollTop >= 415) {
    divEle.addClass("preview-fixed");
  } else {
    divEle.removeClass("preview-fixed");
  }
};
